<template>
  <div class="components-container">
    <div id="search-div">
      <el-input
        v-model="pageBean.keyword"
        placeholder=" id,uuid,设备型号,APP版本,系统版本"
        style="width:300px;"
        clearable/>

      <el-date-picker
        v-model="pageBean.times"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"/>
      <el-button type="primary" @click="searchPage">查询</el-button>
    </div>

    <div>
      <el-table
        :data="logList"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="id"
          width="80"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
        />
        <el-table-column
          prop="uuid"
          label="uuid"
          width="300"
        />
        <el-table-column
          prop="deviceType"
          label="设备型号"/>
        <el-table-column
          prop="appVersion"
          label="app版本"
        />
        <el-table-column
          prop="systemVersion"
          label="系统版本"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="preview(scope.row)">预览</el-button>
            <el-button
              size="mini"
              @click="download( scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :current-page="pageBean.page"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageBean.size"
        :total="pageBean.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChange"
        @current-change="getPage"/>
    </div>

    <el-dialog :visible.sync="dialogTableVisible" title="日志内容" style="       ">
      <div style="">
        <span class="errorLogStr" v-html="errorLogStr"/>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  name: 'ErrorLogList',
  data() {
    return {
      errorLogStr: '',
      dialogTableVisible: false,
      pageBean: {
        page: 1,
        size: 10,
        total: 0,
        keyword: '',
        times: []
      },
      logList: []

    };
  },
  mounted() {
    this.initPage();
  },

  methods: {
    initPage() {
      this.pageBean.keyword = this.pageBean.keyword.trim();
      let url = '/v1/statistics/errorLog/list?page=' + this.pageBean.page + '&size=' + this.pageBean.size +
          '&keyword=' + this.pageBean.keyword;

      if (this.pageBean.times) {
        url = url + '&startTime=' + this.dateFommart('yyyy-MM-dd hh:mm:ss', this.pageBean.times[0]) + '&endTime=' + this.dateFommart('yyyy-MM-dd hh:mm:ss', this.pageBean.times[1]);
      }
      request({
        url: url,
        method: 'get'
      }).then(response => {
        this.logList = response.data.list;
        this.pageBean.total = response.data.total;
        this.pageBean.page = response.data.page;
      });
    },

    getPage(page) {
      this.pageBean.page = page;
      this.initPage();
    },

    sizeChange(size) {
      this.pageBean.size = size;
      this.initPage();
    },

    searchPage() {
      this.pageBean.page = 1;
      this.initPage();
    },

    preview(row) {
      request({
        url: '/v1/statistics/errorLog/get_logstr?id=' + row.id,
        method: 'get'
      }).then(response => {
        this.errorLogStr = response.data.logStr;
        this.dialogTableVisible = true;
      });
    },
    download(row) {
      location.href = process.env.BASE_API + '/statistics/errorLog/download?id=' + row.id;
    },

    dateFommart(fmt, date) { // author: meizz
      if (!date) { return ''; }
      var o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        'S': date.getMilliseconds() // 毫秒
      };
      if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))); }
      }
      return fmt;
    }
  }
};
</script>

<style scoped>
  .components-container {
    position: relative;
    height: 100vh;
    padding: 20px;
  }
  #search-div{
    margin-left: 40px;
  }

  .errorLogStr{
      white-space: pre-wrap;
  }
 .el-dialog__header {
    padding: 20px 20px 10px;
    background-color: #a5c1de;
}
 .el-dialog__title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;
    margin: 45%;
}

.el-pagination {
    float:right;
    margin-top: 20px;
    margin-right: 20px;

    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
}
</style>
